<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/pages/comm/comm.jsp"%>
<script src="${ctx }/static/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctx }/static/js/layer/layer.js"></script>
<!-- <link href="${ctx}/static/css/jquery.cropzoom.css" rel="Stylesheet" type="text/css" /> -->
<script type="text/javascript" src="${ctx}/static/js/jquery.validate.min.js"></script>
<!-- <script type="text/javascript" src="${ctx}/static/js/jquery-ui-1.10.1.custom.min.js"></script> -->
<script type="text/javascript" src="${ctx }/static/js/jquery.form.js"></script>
<!-- <script type="text/javascript" src="${ctx }/static/js/jquery.cropzoom.js"></script> -->
<script type="text/javascript" src="${ctx }/static/script/comm/ajaxFileUpload.js"></script>
<!-- BEGIN PAGE HEADER-->
<div class="row-fluid">
	<div class="span12">
		<!-- BEGIN SAMPLE FORM PORTLET-->
		<div class="portlet box red">
			<div class="portlet-title">
				<div class="caption">
					<i class="icon-reorder"></i>基本信息
				</div>
				<div class="tools">
					<!-- <a href="javascript:;" class="collapse"></a> -->
				</div>
			</div>
			<div class="portlet-body form" style="padding-left:40px;">
				<!-- BEGIN FORM-->
				<form action=""id="userinfoForm" name="userinfoForm" class="horizontal-form">
					<input type="hidden" value="${user.userId}" name="userId">
					<div class="row-fluid">
						<!--/span-->
						<div class="span4 ">
							<div class="control-group">
								<label class="control-label" for="">用户名*</label>
								<div class="controls">
									<input id="accountNo" name="accountNo" class="m-wrap span12"  readonly="readonly"
										value="${user.accountNo}" placeholder="请输入用户名" type="text">
								</div>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<!--/span-->
						<div class="span4 ">
							<div class="control-group">
								<label class="control-label" for="">姓名*</label>
								<div class="controls">
									<input id="username" name="userName" class="m-wrap span12" value="${user.userName }" placeholder="请输入姓名" type="text">
								</div>
							</div>
						</div>
						<div class="span4 ">
							<div class="control-group">
								<label class="control-label" for="">性别</label>
								<div class="controls">
									<input name="sex" value="1" type="radio" <c:if test="${user.sex==1}">checked='checked'</c:if> /> 男
									<input name="sex" value="0" type="radio" <c:if test="${user.sex==0}">checked='checked'</c:if> /> 女
								</div>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<!--/span-->
						<div class="span4 ">
							<div class="control-group">
								<label class="control-label" for="">手机*</label>
								<div class="controls">
									<input id="tel" name="tel" class="m-wrap span12"
										value="${user.tel }" placeholder="" type="text">
								</div>
							</div>
						</div>
						<div class="span4 ">
							<div class="control-group">
								<label class="control-label" for="">邮箱</label>
								<div class="controls">
									<input id="email" name="email" class="m-wrap span12"
										value="${user.email }" placeholder="邮箱" type="text">
								</div>
							</div>
						</div>
					</div>
					
					<div class="row-fluid">
						<div class="span4 ">
							<div class="control-group">
								<label class="control-label" for="">区域</label>
								<div class="controls">
									<select class="m-wrap span6" style="float:left;" name="province">
<!-- 										<option value="全部">全部</option> -->
										<option selected="selected" value="410000000000">河南省</option>
									</select> 
									<select class="m-wrap span5" style="float: right;" name="city">
										<option value="">全部</option>
										<c:forEach items="${adminAreas}" var="area">
											<option value="${area.areaNo }" <c:if test="${area.areaNo==user.city }">selected='selected'</c:if> >${area.areaName }</option>
										</c:forEach>
									</select>
									
								</div>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span6 ">
							<input type="hidden" value="${user.headUrl }" name="headUrl" id="userLogo">
								<label for="contactWay" class="add-label"><span
									class="text-danger"></span>用户头像</label>
							<div class="pic-border" id="userLogoPic">
								<c:choose>
									<c:when test="${!empty user.headUrl }">
										<img class="upload-logo" width="150px" height="150px" src="${user.headUrl }" />
									</c:when>
									<c:otherwise>
										<img class="upload-logo" width="150px" height="150px" src="${ctx }/static/image/avatar1_small.jpg" />
									</c:otherwise>
								</c:choose>
							</div>
							<div class="upload-btn-com">
								<p class="text">logo尺寸要求宽度为150px支持gif,jpg,png</p>
							</div>
						</div>
					</div>
					<div class="form-actions">
						<button type="button" onclick="doSubmit()"  class="btn red">保存</button>
						<button type="button" class="btn green">重置</button>
					</div>
				</form>
				<!-- END FORM-->
			</div>
		</div>
		<!-- END SAMPLE FORM PORTLET-->
	</div>
</div>
<script type="text/javascript">
jQuery.validator.addMethod('isPhone',function(value,element){
	var mobileRgx = /^1[3-8][0-9]\d{4,8}$/;
	//var telRgx =  /^\d{3,4}-\d{7,9}$/;
	return this.optional(element)||mobileRgx.test(value);
},"<span style='color:red;font-size:10px;'>请输入正确格式的手机号码</span>");
$().ready(function(){
 	$("#userinfoForm").validate({
		errorElement: "em",
		submitHandler:function(form){
			$.ajax({
		 		url:'${ctx}/user/updateSelf',
		 		type:'post',
		 		data:$(form).serialize(),
		 		dataType:'json',
		 		success:function(res){
		 			if(res){
		 				if(res.code==200){
		 					layer.msg("修改成功！");
		 					if(res.headUrl){
		 					console.log(res.headUrl);
		 						$('#userHeadUrl').attr("src",res.headUrl);
		 						$('#userLogo').val(res.headUrl);
		 					}
		 				}else{
		 					layer.msg(res.msg);
		 				}
		 			}else{
		 				layer.msg("服务器无响应...");
		 			}
		 		}
		 	});
		},
 		rules:{
			accountNo:{
				required:true
			},
			userName:{
				required:true
			},
			tel:{
				required:true,
				isPhone:[]
			},
			email:{
				//required:true,
				email:true
			}
		},
		messages:{
			accountNo:{
				required:"<span style='color:red;font-size:10px;'>请输入用户名</span>"
			},
			userName:{
				required:"<span style='color:red;font-size:10px;'>请输入姓名</span>"
			},
			tel:{
				required:"<span style='color:red;font-size:10px;'>请输入手机号</span>"
			},
			email:{
				//required:'请输入邮箱',
				email:"<span style='color:red;font-size:10px;'>请输入正确的邮箱</span>"
			}
		}
 	});
 });

function doSubmit(){
	$("#userinfoForm").submit();
}

//头像上传
$(".upload-logo").click(function(){
			var that = this;
			var id = (new Date()).valueOf();
			var url = '${ctx}/image/upload';
			var eleFile = $('<input class="" name="files" type="file" style="display:none" id="file_'+id+'">');
		$(that).after(eleFile);
		eleFile.change(function(e){
			$.ajaxFileUpload({
				fileElementId: "file_"+id,
				url: url,
				dataType: 'json',
				fileFilter:'jpg,png,gif',
				//fileSize:
				success: function (data, textStatus) {
					//$("#userLogoPic").html('<img  width="150px" height="150px" src="/upload/'+data.imgName+'" />');
					$(that).attr("src",data.imgName);
					//$("#upload-img").attr("src", "../resources/upload/"+data.imgName);
					$('#userLogo').attr("value",data.imgName);
					//$('#userHeadUrl').attr("src",'static/upload/'+data.imgName);
					if (typeof (data.error) != 'undefined') {
						if (data.error != '') {
							alert(data.error);
						} else {
							alert(data.msg);
						}
					}
				},
				error: function (XMLHttpRequest, textStatus) {
					console.log(XMLHttpRequest.responseText);
				}
			});
		});
		eleFile.click();
	});
 
</script>
<!-- END PAGE TITLE & -->
